<template>
<div>
	<!--导航栏-->
	<div class="daohang">
		<a href="#/">推荐</a>
		<a href="#/Zeidianji">贼惦记</a>
		<a href="#/Meishi">美食</a>
		<a href="#/Muying">母婴</a>
	</div>
</div>
</template>

<script>
	export default {
		methods: {
			shouye : function(){
				//导航
				$(".daohang>a").click(function() {
					$(this).addClass("oneActive").siblings('a').removeClass("oneActive");
				});
			},
		},
		mounted:function(){
			this.shouye();
		}
		
}
</script>

<style>
/*导航栏*/
	.daohang {
		width: 100%;
		height: 6rem;
		background: #f2f2f2;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 3rem;
		margin-top: 9.6rem;
	}
	
	.daohang a {
		height: 6rem;
		line-height: 6rem;
		box-sizing: border-box;
	}
	.oneActive {
		border-bottom: 0.4rem solid red;
		color: red;
	}
</style>